window.addEventListener('load',function () {
    var progress =document.querySelector('#progress');
    var progress_bar =document.querySelector('#progress_bar')
    var pro_bar_flg =document.querySelector('#progress_bar_flg');
    var pro_bar_val =document.querySelector('#progress_bar_value');
    var pro_val =document.querySelector('#progress_value');

    // var flgxLeft = pro_bar_flg.offsetLeft;
    
    pro_bar_flg.addEventListener('mousedown', function (e) {
        var flgx = e.pageX - pro_bar_flg.offsetLeft;
        document.addEventListener('mousemove',move);
        
        function move(e){
            
            var x =e.pageX - flgx;
            //当pro_bar_flg.style.left 大于 progress_bar.offset.Width
            if(x > progress_bar.offsetWidth - pro_bar_flg.offsetWidth){
                x = progress_bar.offsetWidth - pro_bar_flg.offsetWidth;
            }else if(x <= 0){
                x = 0;
            }
            pro_bar_flg.style.left = x + 'px';
            pro_bar_val.style.width =x + 'px';
            pro_val.innerText =Math.round(x / (progress_bar.offsetWidth - pro_bar_flg.offsetWidth) *100) +'%';
            
            
        }
        
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move);
        })      
    })


})